import React,{Component}   from 'react';

// 兄弟组件通信
/**
 * 兄弟组件通信 状态提升
 * 兄弟组件通信,通过修改父组件的转态值,达到兄弟组件之间通信的目的
 */
class App extends Component {
  state = {
    name: "小明",
  };

  handleEvent = (name) => {
    this.setState({
      name
    });
    // console.log("父组件定义的event事件")
  };
  render() {
    return (
      <div>
        <div>
          <span>父组件姓名:</span>
          {this.state.name}
        </div>
        <button onClick={()=>{
            this.setState({
              name:'小红'
            })
        }}> 父组件按钮 </button>
        {/**
          * 兄弟组件通信 状态提升
          * 兄弟组件通信,通过修改父组件的转态值,达到兄弟组件之间通信的目的
         */}
        <Item1 handleEvent={this.handleEvent}  name={this.state.name} />

        <Item2 handleEvent={this.handleEvent}  name={this.state.name} />
      
      </div>
    );
  }
}

//子组件
class Item1 extends Component {
  render() {
    return (
      <div style={{ background: "red" }} >

        <div>
          <span>子组1件姓名:</span>
          {this.props.name}
        </div>
        <button
          onClick={() => {
            console.log("子通知父， 修改 父组件name 值!");
            this.props.handleEvent("小王"); //调用父组件传来啊的回调函数
          }}
        >
          子组1件间click
        </button>
        <span>子组件1</span>
      </div>
    );
  }
}

//子组件
class Item2 extends Component {
  render() {
    return (
      <div style={{ background: "yellow" }}>

        <div>
          <span>子组2件姓名:</span>
          {this.props.name}
        </div>
        <button
          onClick={() => {
            console.log("子通知父， 修改 父组件name 值!");
            this.props.handleEvent("小张"); //调用父组件传来啊的回调函数
          }}
        >
          子组2件间click
        </button>
        <span>子组件2</span>
      </div>
    );
  }
}



export default App;